<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调色基础教学</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            color: #333;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        h1 {
            text-align: center;
            color: #444;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .step {
            display: none;
        }

        .step.active {
            display: block;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        .control-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
        }

        .control-group label {
            flex: 1;
            text-align: right;
            margin-right: 10px;
            font-size: 16px;
        }

        .control-group input[type="range"] {
            flex: 3;
        }

        .tooltip {
            background: #444;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            position: absolute;
            top: -30px;
            font-size: 12px;
            display: none;
        }

        .control-group:hover .tooltip {
            display: block;
        }

        .description {
            text-align: left;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.5;
            color: #666;
        }

        .footer {
            text-align: center;
            font-size: 12px;
            color: #999;
        }

        .artistic-background {
            background-image: url('path_to_your_background_image.jpg');
            background-size: cover;
            background-position: center;
            padding: 20px;
            border-radius: 10px;
        }

        .artistic-title {
            font-family: 'Georgia', serif;
            color: #fff;
            font-size: 28px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 20px;
        }

        .step-navigation {
            display: flex;
            justify-content: space-between;
        }

        .step-navigation button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .step-navigation button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }

            .artistic-title {
                font-size: 24px;
            }

            .step-navigation button {
                padding: 8px 16px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="container artistic-background">
        <h1 class="artistic-title">调色基础教学</h1>
        <div class="step active" id="step1">
            <div class="description">
                <p>第一步：调整亮度。亮度决定了画面的明暗程度。通过调节亮度，你可以让视频看起来更亮或更暗。</p>
            </div>
            <div class="video-container">
                <video id="videoStep1" controls>
                    <source src="path_to_your_video.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="controls">
                <div class="control-group">
                    <label for="brightness">亮度</label>
                    <input type="range" id="brightness" min="0" max="200" value="100">
                    <span class="tooltip">调整亮度，让画面更加明亮或昏暗。</span>
                </div>
            </div>
        </div>
        <div class="step" id="step2">
            <div class="description">
                <p>第二步：调整对比度。对比度决定了画面中明暗区域的差异。通过调节对比度，你可以让色彩更加分明。</p>
            </div>
            <div class="video-container">
                <video id="videoStep2" controls>
                    <source src="path_to_your_video.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="controls">
                <div class="control-group">
                    <label for="contrast">对比度</label>
                    <input type="range" id="contrast" min="0" max="200" value="100">
                    <span class="tooltip">提高对比度，让色彩更加分明。</span>
                </div>
            </div>
        </div>
        <div class="step" id="step3">
            <div class="description">
                <p>第三步：调整饱和度。饱和度决定了色彩的鲜艳程度。通过调节饱和度，你可以让色彩更加鲜艳或更加灰暗。</p>
            </div>
            <div class="video-container">
                <video id="videoStep3" controls>
                    <source src="path_to_your_video.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="controls">
                <div class="control-group">
                    <label for="saturation">饱和度</label>
                    <input type="range" id="saturation" min="0" max="200" value="100">
                    <span class="tooltip">增加饱和度，让色彩更加鲜艳。</span>
                </div>
            </div>
        </div>
        <div class="step" id="step4">
            <div class="description">
                <p>第四步：调整高光和阴影。高光决定了画面中最亮的部分，阴影决定了画面中最暗的部分。</p>
            </div>
            <div class="video-container">
                <video id="videoStep4" controls>
                    <source src="path_to_your_video.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="controls">
                <div class="control-group">
                    <label for="highlights">高光</label>
                    <input type="range" id="highlights" min="0" max="200" value="100">
                    <span class="tooltip">调整高光，使亮部更加突出。</span>
                </div>
                <div class="control-group">
                    <label for="shadows">阴影</label>
                    <input type="range" id="shadows" min="0" max="200" value="100">
                    <span class="tooltip">调整阴影，使暗部更加深邃。</span>
                </div>
            </div>
        </div>
        <div class="step-navigation">
            <button id="prevStep" disabled>上一步</button>
            <button id="nextStep">下一步</button>
        </div>
        <div class="footer">
            &copy; 2024 调色基础教学
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var steps = document.querySelectorAll('.step');
            var currentStep = 0;

            var prevButton = document.getElementById('prevStep');
            var nextButton = document.getElementById('nextStep');

            function showStep(index) {
                steps.forEach((step, i) => {
                    step.classList.toggle('active', i === index);
                });

                prevButton.disabled = index === 0;
                nextButton.textContent = index === steps.length - 1 ? '完成' : '下一步';
            }

            prevButton.addEventListener('click', function() {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });

            nextButton.addEventListener('click', function() {
                if (currentStep < steps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                } else {
                    alert('调色基础教学完成！');
                }
            });

            showStep(currentStep);

            // 视频滤镜应用
            var brightnessRange = document.getElementById('brightness');
            var contrastRange = document.getElementById('contrast');
            var saturationRange = document.getElementById('saturation');
            var highlightsRange = document.getElementById('highlights');
            var shadowsRange = document.getElementById('shadows');
            var videoElements = [
                document.getElementById('videoStep1'),
                document.getElementById('videoStep2'),
                document.getElementById('videoStep3'),
                document.getElementById('videoStep4')
            ];

            function applyFilters() {
                var brightnessValue = brightnessRange.value / 100;
                var contrastValue = contrastRange.value / 100;
                var saturationValue = saturationRange.value / 100;
                var highlightsValue = highlightsRange.value / 100;
                var shadowsValue = shadowsRange.value / 100;

                var filterValue = 'brightness(' + brightnessValue + ') ' +
                                  'contrast(' + contrastValue + ') ' +
                                  'saturate(' + saturationValue + ') ' +
                                  'brightness(' + highlightsValue + ') ' +
                                  'contrast(' + shadowsValue + ')';

                videoElements.forEach(video => {
                    video.style.filter = filterValue;
                });
            }

            brightnessRange.addEventListener('input', applyFilters);
            contrastRange.addEventListener('input', applyFilters);
            saturationRange.addEventListener('input', applyFilters);
            highlightsRange.addEventListener('input', applyFilters);
            shadowsRange.addEventListener('input', applyFilters);
        });
    </script>
</body>
</html>
